import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View,Image,Text,Block } from '@tarojs/components'
import {Stepper,ActionSheet,Row, Col,Button } from '@antmjs/vantui'
import { connect } from 'react-redux'
import { AddShoppingAction,DecreaseShoppingAction,SetShoppingAction} from '../../../redux/action/shoppingAction';
// import { ChangeLoadingAction } from '../../redux/action/loadingAction';
// import Loading from '../../components/Loading/index'
import http from '../../../service/http';
import dev from '../../../../config/dev'
import './index.less'

const isH5 = process.env.TARO_ENV === 'h5'

@connect(	state => ({
    shoppingCart:state.shoppingCart
	}),
	{AddShoppingAction,DecreaseShoppingAction,SetShoppingAction}
)
class List extends Component {
  state={
    isShowModal:false,
    choose:1,
    list:null,
    num:this.props.shoppingCart.data[this.props.obj.id].num
  }

  // UNSAFE_componentWillMount () { console.log('UNSAFE_componentWillMount,组件还没挂载前');if(isH5){console.log('你当前环境为H5')} }

  async componentDidMount () {
  }

  // shouldComponentUpdate (nextProps,nextState) { console.log('shouldComponentUpdate,组件是否需要更新',nextProps,nextState);return true }

  // componentWillUnmount () { console.log('componentWillUnmount,组件卸载前') }

  // componentDidShow () { console.log('componentDidShow,组件显示后') }

  // componentDidHide () { console.log('componentDidHide,组件隐藏后') }

  async varietyDetail(){
    let that=this
    let {data}=await http.getNormsWeApp({normsType:that.props.obj.normsType})
    that.setState({list:data})
    that.setState({isShowModal:true})
  }
  changeStepper(e){
    // console.log(e.detail)
    // console.log(this.props.shoppingCart.data[this.props.obj.id].num)
    if(e.detail>this.props.shoppingCart.data[this.props.obj.id].num){
      this.props.AddShoppingAction(this.props.obj)
      // console.log('加一')
    }else{
      this.props.DecreaseShoppingAction(this.props.obj)
      // console.log('减一')
    }
  }
  buttonClick(){
    this.props.SetShoppingAction({norms:this.state.list?this.state.list.list[this.state.choose]:null,obj:this.props.obj,num:this.state.num-this.props.shoppingCart.data[this.props.obj.id].num,numNow:this.state.num})
    Taro.showToast({
      title:'添加成功',
      icon:'success'
    })
    this.setState({isShowModal:false})
  }
  render () {
    return (
      <Block>
        <View className='list-variety'>
          <View className='avatar-box'><Image className='img' src={dev.baseUrl+this.props.obj.img}></Image></View>
          <View className='list-content'>
            <View className='content-title'>{this.props.obj.name}</View>
            {!this.props.not?<View className='sell-num'>月销售:{this.props.obj.sum?this.props.obj.sum:0}</View>:null}
            <View className='variety-config'><Text className='variety-config1'>￥</Text>{this.props.obj.price}<Text className='variety-config1'>/{this.props.obj.unitName}</Text></View>
          </View>
          <View className='list-footer'>
            {
              this.props.obj.normsType!==-1&&!this.props.not?<Button type='danger' hairline  size='mini' plain onClick={this.varietyDetail.bind(this)}>选规格</Button>:
              <Stepper
                value={this.props.shoppingCart.data.length>0?this.props.shoppingCart.data[this.props.obj.id].num:0}
                integer min='0' max='10' theme='round' buttonSize='20px' disableInput
                onChange={this.changeStepper.bind(this)}
              />
            }
          </View>
        </View>
        <ActionSheet
          show={this.state.isShowModal}
          onClose={() => this.setState({isShowModal:false})}
          safeAreaInsetBottom={false}
        >
          <View className='list-variety'>
            <View className='avatar-box' ><Image className='img' src={dev.baseUrl+this.props.obj.img}></Image></View>
            <View className='list-content'>
              <View className='content-title'>{this.props.obj.name}</View>
              <View className='sell-num'>月销售:{this.props.obj.sum?this.props.obj.sum:0}</View>
              <View className='variety-config'><Text className='variety-config1'>￥</Text>{this.props.obj.price}<Text className='variety-config1'>/{this.props.obj.unitName}</Text></View>
              </View>
          </View>
          <View className='sheet-detail-num'>
            <View className='font-wight'>数量</View>
            <Stepper
              value={this.props.shoppingCart.data.length>0?this.props.shoppingCart.data[this.props.obj.id].num:0}
              integer min='0' max='10' theme='round' buttonSize='20px' disableInput
              onChange={(e)=>{this.setState({num:e.detail})}}
            />
          </View>
          <View className='norms-name font-wight'>{this.state.list!==null?this.state.list.name:''}</View>
          <View className='norms-content'>
            <Row gutter='60' className='row'>
              {
                this.state.list!==null?this.state.list.list.map((item,index)=>{
                  return (
                    <Col span='8' key={item.id} onClick={()=>{
                      this.setState({choose:index})
                    }}
                    >
                      <View className={this.state.choose===index?'button-select':'button'}>{item.name}</View>
                    </Col>
                  )
                }):''
              }
            </Row>
          </View>
          <View className='detail-button-submit'>
            <Button type='info' style={{width:'100%',margin:'0 auto'}} round onClick={this.buttonClick.bind(this)}>加入购物车</Button>
          </View>
        </ActionSheet>
      </Block>
    )
  }
}
List.defaultProps = {}
export default List

